@import './_vars.scss';

.xdh-map-measure{
  &__tooltips{
    position: relative;
    width:5px;
    height: 5px;
    border-radius: 50%;
    background:rgba(0,0,0,0.6);
    
    &>div{
      display:inline-block;
      position: absolute;
      width: max-content;
      padding: 0 3px;
      font-size: 12px;
      color: white;
      border-radius: 3px;
      background: rgba(0,0,0,0.6);
    }
    .help{
      line-height: 24px;
      left: 10px;
      top: -3px;
    }
    .range{
      left: 0;
      transform:translateX(-50%);
      &.length{
        top: -34px;
        line-height: 24px;
      }
      &.area{
        top: -50px;
        line-height: 28px;
        sup{
          line-height: 1;
          font-size: 10px;
        }
      }
    }
  }
  &__close {
    position: relative;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: $--border-radius;
    text-align: center;
    &.light{
      background: $--measure-close-bg-light;
      color: $--measure-close-color-light;
    }
    &.dark{
      background: $--measure-close-bg-dark;
      color: $--measure-close-color-dark;
    }
  }
  &__output {
    font-size: 12px; 
    line-height: 1.2;
    span{
      white-space:nowrap;
      sup{
        line-height: 1;
        font-size: 8px;
      }
    }
  }
}